<template>
	<view class="container">
		<view class="card-section">
			<view class="section-title">已购停车卡</view>
			<view v-if="purchasedCards.length > 0">
				<view v-for="card in purchasedCards" :key="card.id" :class="['card-item', card.type === 'monthly' ? 'monthly-card' : 'daily-card']">
					<view class="card-content">
						<view class="card-info">
							<view class="card-name">{{ card.parkingLot }}</view>
							<view class="plate-number">{{ card.plateNumber }}</view>
							<view class="expiry-date">到期时间: {{ card.expiryDate }}</view>
						</view>
						<view class="card-action">
							<button class="renew-btn" @click="navigateToPurchase(card, true)">续费</button>
						</view>
					</view>
					<view class="card-type-badge">{{ card.type === 'monthly' ? '月卡' : '天卡' }}</view>
				</view>
			</view>
			<view v-else class="empty-state">暂无已购停车卡</view>
		</view>

		<view class="card-section">
			<view class="section-title">可购停车卡</view>
			<view v-if="availableCards.length > 0">
				<view v-for="card in availableCards" :key="card.id" :class="['card-item', card.type === 'monthly' ? 'monthly-card' : 'daily-card']">
					<view class="card-content">
						<view class="card-info">
							<view class="card-name-p">{{ card.parkingLot }}</view>
							<view class="price">¥ <text class="price-value">{{ card.price }}</text></view>
						</view>
						<view class="card-action">
							<button class="buy-btn" @click="navigateToPurchase(card, false)">购买</button>
						</view>
					</view>
					<view class="card-type-badge">{{ card.type === 'monthly' ? '月卡' : '天卡' }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';

const purchasedCards = ref([
	{ id: 1, parkingLot: '城西银泰停车场', plateNumber: '浙A·88888', price: 300, expiryDate: '2024-12-31', type: 'monthly' },
	{ id: 2, parkingLot: '火车东站停车场', plateNumber: '浙A·66666', price: 300, expiryDate: '2024-08-15', type: 'daily' },
]);

const availableCards = ref([
	{ id: 3, parkingLot: '西溪湿地停车场', price: 300, type: 'monthly' },
	{ id: 4, parkingLot: '武林广场停车场', price: 20, type: 'daily' },
]);

const navigateToPurchase = (card, isRenew) => {
	const url = `/pages/parking-card/purchase?card=${encodeURIComponent(JSON.stringify(card))}&isRenew=${isRenew}`;
	uni.navigateTo({ url });
};

const back = () => {
	uni.navigateBack();
};
</script>

<style scoped>
.container {
	background-color: #f5f5f5;
	min-height: 100vh;
}

.card-section {
	padding: 20rpx 30rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	margin-bottom: 20rpx;
}

.card-item {
	background-color: #fff;
	border-radius: 16rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	color: #fff;
	position: relative;
	overflow: hidden;
}

.monthly-card {
	background: linear-gradient(135deg, #1DCFB7, #12ada9);
}

.daily-card {
	background: linear-gradient(135deg, #2196F3, #64B5F6);
}

.card-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.card-info {
	display: flex;
	flex-direction: column;
}

.card-name {
	font-size: 30rpx;
	/*font-weight: bold;*/
	margin-bottom: 10rpx;
}

.card-name-p{
  font-size: 40rpx;
  /*font-weight: bold;*/
  margin-bottom: 10rpx;
}

.plate-number {
	font-size: 42rpx;
	font-weight: bold;
	margin-bottom: 10rpx;
}

.expiry-date {
	font-size: 26rpx;
	opacity: 0.9;
}

.price {
	font-size: 32rpx;
}

.price-value {
	font-size: 48rpx;
	font-weight: bold;
}

.card-action {
	display: flex;
	align-items: center;
}

.card-type-badge {
	position: absolute;
	top: 20rpx;
	right: 20rpx;
	background-color: rgba(255, 255, 255, 0.2);
	padding: 4rpx 12rpx;
	border-radius: 20rpx;
	font-size: 24rpx;
}

.renew-btn, .buy-btn {
	background-color: #fff;
    color: #333;
    border: none;
    border-radius: 0.9375rem;
    /* padding: 0.3125rem 0.9375rem; */
    font-size: 0.875rem;
    /* font-weight: bold; */
    margin-top: 120rpx;
}

.renew-btn {
	color: #4CAF50;
}

.buy-btn {
	color: #2196F3;
}

.empty-state {
	text-align: center;
	color: #999;
	padding: 40rpx 0;
}
</style>